<template>
  <div>
    <el-drawer
      title="立减设置"
      :before-close="handleClose"
      :visible.sync="reductionConfigDialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="55%"
    >
      <div class="demo-drawer__content">
        <el-form
          :model="form"
          label-position="top"
          :rules="rules"
          ref="ruleForm"
        >
          <el-form-item
            label="是否开启每升立减活动信息展示"
            label-width="80px"
            prop="isShow"
          >
            <el-radio v-model="form.isShow" label="1">开启</el-radio>
            <el-radio v-model="form.isShow" label="0">关闭</el-radio>
          </el-form-item>
          <el-form-item
            label="返利金设置"
            label-width="80px"
            prop="isShow1"
          >
            <el-select
              v-model="form.stationId"
              placeholder="请选择油站"
              size="small"
              filterable
              clearable
              style="width:350px"
              @change="onChangeSelect"
            >
              <el-option
                v-for="item in stationListQuery"
                :key="item.stationId"
                :label="item.stationName"
                :value="item.stationId"
              ></el-option>
            </el-select>
          </el-form-item>
          <div v-if="isAdd">
            <div v-for="(item, index) in list" :key="index" class="fanli_btn">
              <span>需消费<el-input-number :precision="2" v-model="item.money1" style="margin:0px 20px" :min="0"></el-input-number>
              元  可用<el-input-number :precision="2" v-model="item.money2" style="margin:0px 20px" :min="0"></el-input-number>返利金<span>
          <el-button style="margin-left:20px;" type="primary" @click="addItem" v-if="index === list.length - 1">新增</el-button>
          <el-button style="margin-left:20px;" type="danger" @click="removeItem(index)" v-if="list.length > 1">删除</el-button>
        </span>
      </span>
    </div>
          </div>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm" :loading="loading">{{
            loading ? "提交中 ..." : "确 定"
          }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  getReductionShowInfoApi,
  updateReductionShowInfoApi,
  addByStationApi,
  getByStationIdApi,
  delByStationIdApi
} from "@/api/market/reductionActivity";
import {listEnterpriseStation} from "@/api/dept";
export default {
  name: "ReductionConfig",
  props: {
    reductionConfigDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      form: {
        isShow: null, // 0不启用  1启用
      },
      rules: {
        isShow: [{ required: true, message: "请选择", trigger: "change" }],
      },
      stationListQuery: [],
      isAdd:false,
      list:[{money1: 0, money2: 0}],//新增的list
      stationId:null
    };
  },
  watch: {
    reductionConfigDialog(val) {
      if (val) {
        this.getReductionShowInfo();
      }
    },
  },
  created(){
    this.getStationListQuery()
  },
  methods: {
    async getSetMoney(id){
      const res=await getByStationIdApi({stationId:id})
      if(res&&res.code==200){ 
        if(res.data.length){ 
            res.data.forEach(item=>{ 
            this.list.push({id:item.id,money1:item.consumptionThreshold,money2:item.useAmount})
          })
        }else{ 
          this.list=[{money1: 0, money2: 0}]
        }
      }
      console.log('返利设置',res);
    },
    addItem() {
      this.list.push({ money1: 0, money2: 0 });
    },
    async removeItem(index) {
      if (this.list.length > 1) {
        if(this.list[index].id){ 
          const res=await delByStationIdApi(this.list[index].id)
          if(res&&res.code==200){ 
            this.$message.success('删除成功');
            this.list.splice(index, 1);
          }
        }else{
          this.list.splice(index, 1);
        }
      }
    },
    onChangeSelect(e){
      this.list=[]
      this.isAdd=true
      this.form.stationId=e
      this.getSetMoney(e)
    },
    getStationListQuery() {
      listEnterpriseStation({ enterpriseId: this.presentEnterprise.enterpriseId }).then((res) => {
        this.stationListQuery = res;
      });
    },
    handleClose() {
      this.isAdd=false
      this.list=[{money1: 0, money2: 0}]
      this.form.stationId=''
      this.$emit("update:reductionConfigDialog", false);
    },
    async getReductionShowInfo() {
      const res = await getReductionShowInfoApi();
      this.form.isShow = res.data.isShow + "";
    },
    submitForm() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let isShow = this.form.isShow;
          let newArr=[]
          if(this.form.stationId){ 
            this.list.forEach(item=>{
              newArr.push({stationId:this.form.stationId,consumptionThreshold:item.money1,useAmount:item.money2,id:item.id})
            })
          }
          // 定义待执行的异步操作数组
          const promises = [
            updateReductionShowInfoApi(isShow),
            addByStationApi(newArr)
          ];
        // 执行所有异步操作并等待结果
          await Promise.all(promises);
          this.msgSuccess("设置成功");
          this.handleClose();
        } else {
          console.log("error");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .demo-drawer {
  .el-drawer__header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
  }
  .fanli_btn{ 
    margin-top: 20px;
  }
  .el-drawer__body {
    padding: 15px;
    overflow-x: hidden;
    .demo-drawer__footer {
      margin-top: 30px;
      text-align: right;
    }
  }
}
</style>
